<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!--引入 头部片段-->
    <div  th:replace="admin/common/back_common :: header"></div>

    <!--引入 左侧导航片段-->
    <div  th:replace="admin/common/back_common :: left"></div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <!-- 查询条件开始-->

        <form class="layui-form">
            <blockquote class="layui-elem-quote quoteBox">
                <form class="layui-form" >
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">父级分类</label>
                            <div class="layui-input-inline">
                                <select name="quiz1">
                                    <option value="">请选择分类</option>
                                    <option value="浙江" selected="">浙江省</option>
                                    <option value="你的工号">江西省</option>
                                    <option value="你最喜欢的老师">福建省</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">分类名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="title" id="title" class="layui-input searchVal" placeholder="请输入公告标题" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">开始时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="startTime" id="startTime" class="layui-input searchVal" placeholder="开始时间" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">结束时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="endTime" id="endTime" class="layui-input searchVal" placeholder="结束时间" />
                            </div>
                        </div>

                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block" style="text-align: center;">
                            <button type="button" class="layui-btn" lay-submit="" lay-filter="doSearch"><span class="layui-icon layui-icon-search"></span>查询</button>
                            <button type="reset" class="layui-btn layui-btn-warm"><span class="layui-icon layui-icon-refresh-1"></span>重置</button>
                        </div>
                    </div>
                </form>
            </blockquote>
        </form>
        <!-- 查询条件结束-->

        <!-- 数据表格开始 -->
        <div>
            <table class="layui-hide" id="noticeTable" lay-filter="noticeTable"></table>
            <!-- 工具栏 -->
            <div id="noticeToolBar" style="display: none;">
                <button type="button" lay-event="add" class="layui-btn layui-btn-sm"><span class="layui-icon layui-icon-add-1"></span>添加公告</button>
                <button type="button" lay-event="batchDelete" class="layui-btn layui-btn-sm layui-btn-danger"><span class="layui-icon layui-icon-delete"></span>批量删除</button>
            </div>

            <div id="noticeRowBar" style="display: none;">
                <button type="button" lay-event="update" class="layui-btn layui-btn-sm"><span class="layui-icon layui-icon-edit"></span>更新</button>
                <button type="button" lay-event="delete" class="layui-btn layui-btn-sm layui-btn-danger"><span class="layui-icon layui-icon-delete"></span>删除</button>
                <button type="button" lay-event="show" class="layui-btn layui-btn-sm"><span class="layui-icon layui-icon-about"></span>查看</button>
            </div>
        </div>
        <!-- 数据表格结束 -->


    </div>


    <!-- 添加和修改的弹出层开始 -->
    <div  style="display: none;padding: 5px" id="addOrUpdateDiv">
        <form class="layui-form" style="width:80%;" id="dataFrm" lay-filter="dataFrm">
            <div class="layui-form-item layui-row layui-col-xs12">
                <label class="layui-form-label">父级分类</label>
                <div class="layui-input-inline">
                    <select name="quiz1">
                        <option value="">请选择分类</option>
                        <option value="浙江" selected="">浙江省</option>
                        <option value="你的工号">江西省</option>
                        <option value="你最喜欢的老师">福建省</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-row layui-col-xs12">
                <label class="layui-form-label">分类名</label>
                <div class="layui-input-block">
                    <input type="hidden" name="id">
                    <input type="text" class="layui-input" name="title"  lay-verify="required" placeholder="请输入标题">
                </div>
            </div>
            <div class="layui-form-item layui-row layui-col-xs12">
                <div class="layui-input-block" style="text-align: center;">
                    <button type="button" class="layui-btn" lay-submit="" lay-filter="doSubmit" ><span class="layui-icon layui-icon-add-1"></span>提交</button>
                    <button type="reset" class="layui-btn layui-btn-warm"><span class="layui-icon layui-icon-refresh-1"></span>重置</button>
                </div>
            </div>
        </form>
    </div>
    <!-- 添加和修改的弹出层结束 -->

    <!-- 查看弹出层的开始 -->
    <div style="display: none;padding: 5px" id="showNoticeDiv">
        <div id="show_content" style="line-height: 100px;" align="center">
            <h1><span>学校</span>:<span>清华大学</span></h1>
        </div>
    </div>
    <!-- 查看弹出层的结束-->

    <!--引入   底部固定区域 -->
    <div  th:replace="admin/common/back_common :: footer"></div>
</div>
<script src="/layui/layui.js"></script>
<script type="text/javascript">


        layui.use(['element','jquery','form','table','layer','laydate','layedit'],function () {
            var element = layui.element;
            var $=layui.jquery;
            var form=layui.form;
            var table=layui.table;
            var layer=layui.layer;
            var laydate=layui.laydate;
            var layedit=layui.layedit;

            //日期时间选择器
            laydate.render({
                elem: '#startTime'
                ,type: 'datetime'
            });
            //日期时间选择器
            laydate.render({
                elem: '#endTime'
                ,type: 'datetime'
            });

            var tableIns = table.render({
                elem: '#noticeTable',
                url: 'json/data.json',
                toolbar: '#noticeToolBar',
                page: 'true',
                title: '账单数据表',
                cols: [ [
                    {type:'checkbox'},
                    {field:'id',title:'ID',align:'center'},
                    {field:'username',title:'父级分类',align:'center'},
                    {field:'sex',title:'分类名称',align:'center'},
                    {field:'city',title:'创建时间',align:'center'},
                    {field:'sign',title:'修改时间',align:'center'},
                    {title:'操作',toolbar:'#noticeRowBar',width:250}
                ] ],
                done:function (res,curr,count) {
                    if(curr>1 && res.data.length==0){
                        tableIns.reload({
                            page:{curr:curr-1}
                        });

                    }
                }
            });



            form.on("submit(doSearch)",function (data) {
                tableIns.reload({
                    url:'/sys/notice/noticeList',
                    where:data.field,
                    page:{
                        curr:1
                    }
                })
                return false;
            })

            table.on('toolbar(noticeTable)',function (obj) {
                switch (obj.event) {
                    case "add":
                        openAddNoticeLayer();
                        break;
                    case "batchDelete":
                        batchDelete();
                        break;
                }
            })
            table.on('tool(noticeTable)',function (obj) {
                var data = obj.data;
                switch (obj.event) {
                    case "update":
                        openUpdateNoticeLayer(data);
                        break;
                    case "delete":
                        deleteInfo(data);
                        break;
                    case "show":
                        showNotice(data);
                        break;
                }
            })

            //弹出层索引
            var mainIndex;
            //提交路径
            var url;
            //初始化富文本编辑器
            var editIndex;

            //查看公告
            function  showNotice(data) {
                mainIndex = layer.open({
                    type:1,
                    content:$("#showNoticeDiv"),
                    area:["300px","200px"],
                    title:"查看公告",
                    success:function () {
                        $("#show_title").html(data.title);
                        $("#show_opername").html(data.opername);
                        //$("#show_createtime").html(data.createtime);
                        $("#show_content").html(data.content);
                    }
                });
            }

            //添加
            function openAddNoticeLayer() {
                mainIndex = layer.open({
                    type:1,
                    content:$("#addOrUpdateDiv"),
                    area:["400px","300px"],
                    title:"发布公告",
                    success:function () {

                        $("#dataFrm")[0].reset();
                        layedit.setContent(editIndex,"");
                        url="/sys/notice/addNotice";

                    }
                });

                //初始化富文本编辑器
                editIndex = layedit.build('content');
            }
            //修改
            function openUpdateNoticeLayer(data) {
                mainIndex = layer.open({
                    type:1,
                    content:$("#addOrUpdateDiv"),
                    area:["400px","300px"],
                    title:"更新公告",
                    success:function () {
                        form.val("dataFrm",data);
                        layedit.setContent(editIndex,data.content);
                        url="/sys/notice/updateNotice";

                    }
                });

                //初始化富文本编辑器
                editIndex = layedit.build('content');
            }
            //删除
            function deleteInfo(data){
                layer.confirm("确定要删除这条数据吗？",{icon:3,title:"提示"},function (index) {
                    $.post("/sys/notice/deleteById",{"id":data.id},function (result) {
                        if(result.success){
                            tableIns.reload();
                        }
                        layer.msg(result.message);
                    },"json")
                    //关闭弹窗
                    layer.close(index);
                })
            }

            //批量删除
            function batchDelete(){
                //获取选中的行
                var checkStatus = table.checkStatus("noticeTable");
                //判断是否选中行
                var length = checkStatus.data.length;
                if(length>0){
                    layer.confirm('确定要删除这些数据吗?',{icon:3,title:"提示"},function (index) {
                        var data = checkStatus.data;
                        var idArr = []
                        for(var i = 0 ; i<length;i++){
                            idArr.push(data[i].id);
                        }
                        var ids = idArr.join(",");
                        $.post("/sys/notice/batchDelete",{"ids":ids},function (result) {
                            if(result.success){
                                tableIns.reload();
                            }
                            layer.msg(result.message);
                        },"json")
                    })
                    layer.close(index);
                }else{
                    layer.alert("请选择要删除的行",{icon:0})
                }
            }

            //提交事件
            form.on("submit(doSubmit)",function (data) {
                //同步富文本和textarea内用
                layedit.sync(editIndex);

                $.post(url,$("#dataFrm").serialize(),function (result) {
                    if(result.success){
                        //提示信息
                        layer.msg(result.message,{icon:1});
                        //刷新数据表格
                        tableIns.reload();
                        //关闭窗口
                        layer.close(mainIndex);
                    }else {
                        layer.msg(result.message,{icon:2});
                    }
                },"json");
                return false;
            })


    });

</script>
</body>
</html>